<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
        <link type="text/css" rel="stylesheet"
              href="#{request.contextPath}/resources/css/default.css" />
        <link type="text/css" rel="stylesheet"
              href="#{request.contextPath}/resources/css/syntaxhighlighter/syntaxhighlighter.css" />
        <link type="text/css" rel="stylesheet"
              href="#{request.contextPath}/resources/css/ui-admin-site/layout.css" />

        <script type="text/javascript" src="#{request.contextPath}/resources/js/locale.js"/>
        <style type="text/css">
            .ui-layout-pane-north .ui-layout-unit-content {
                overflow: visible;
            }
            #cabezera{
                background: url("/sistema/javax.faces.resource/images/default.png.jsf?ln=primefaces-casablanca") repeat-x scroll 50% 50% #E6E6E6;
            }
            .ui-menubutton .ui-state-default .ui-icon {
                /*background-position: -192px -112px !important;*/
                background-position: -195px -112px !important;
            }

            #defaultTable .ui-menubutton button{
                width: 25px;
                height: 20px;
                border-radius: 0 !important;
                border-color: greenyellow !important;
            }
        </style>
        <f:facet name="last">
            <style type="text/css">
                .ui-layout-pane-north .ui-layout-unit-content {
                    overflow: visible;
                }
            </style>
        </f:facet>
    </h:head>
    <h:body>

        <pe:layout style="width:450px; height:220px;" widgetVar="fplayout" >

            <pe:layoutPane position="north" spacingOpen="0"  id="cabezera"
                           resizable="false" size="50" closable="false"
                           styleClassContent="layout-header">
                <div class="warp-content">
                    <div class="left" align="center">
                        <ui:insert name="headerLeftPosition"/>                      
                    </div>
                    <div class="center" align="center">

                        <div class="name-software">Systema De Encuesta</div>
                    </div>
                    <div class="right" align="right">
                        <ui:insert name="headerRightPosition"/>
                    </div>   
                </div>

            </pe:layoutPane>

            <pe:layoutPane position="west" spacingOpen="0" spacingClosed="8" >  
                <f:facet name="header" >
                    <table style="width: 100%">
                        <tr>
                            <td style="width: 97%;font-size: 12px;">
                                Menu Principal
                            </td>
                            <td style="float: left;">
                                <p:commandLink styleClass="ui-icon ui-icon-circle-arrow-w" 
                                               onclick="fplayout.close('west');"
                                               title="Ocultar"/>
                            </td>
                        </tr>

                    </table>
                </f:facet>
                <div style="width: 100%;height: 100%">
                    <div id="wrap"> 
                        <div id="main"> 
                            <ui:insert name="rigthPosition"/>
                        </div>
                    </div>
                    <p:separator/><br/>
                    <div id="footer"> 
                        <p>CopyRight: Max Dicson Cóndor Fernández</p>
                        <p:separator/>
                    </div>

                </div>
            </pe:layoutPane>  
            <pe:layoutPane position="center" closable="true" id="centerPanel" >
                <ui:insert name="centerPosition"/>
            </pe:layoutPane>  
        </pe:layout>  

        <pe:blockUI target="centerPanel" widgetVar="blockUI">  
            <h:panelGrid columns="2">  
                <h:graphicImage value="/resources/images/ajax-loader.gif" 
                                style="margin-right: 12px; vertical-align: middle;"/>  
                <h:outputText value="Cargando Contenido..." style="white-space: nowrap;"/>  
            </h:panelGrid>  
        </pe:blockUI>   

        <ui:insert name="status">
            <p:ajaxStatus
                style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
                <f:facet name="start">
                    <p:graphicImage value="/resources/images/loading.gif" />
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
        </ui:insert>
        
        <p:growl autoUpdate="true" id="growlId"/>
    </h:body>
</html>